<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
	<title>Grain Player</title>

	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png">

	<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"/>
	<script src="../build/Tone.js"></script>
	<script src="./js/tone-ui.js"></script>
	<script src="./js/components.js"></script>
</head>
<body>
	<style type="text/css">
		tone-play-toggle, tone-fft {
			margin-bottom: 10px;
		}

		tone-fft {
			background-color: black;
			height: 40px;
			width: 100%;
			border-radius: 20px;
		}
	</style>
	<tone-example label="Granular Synthesis">
		<div slot="explanation">
			<a href="https://tonejs.github.io/docs/GrainPlayer">Tone.GrainPlayer</a> uses
			<a href="https://en.wikipedia.org/wiki/Granular_synthesis">granular synthesis</a>
			to enable you to adjust pitch and playback rate independently. The grainSize is the 
			amount of time each small chunk of audio is played for and the overlap is the 
			amount of crossfading transition time between successive grains.
		</div>
		
		<tone-loader></tone-loader>

		<div id="content">
			<tone-play-toggle></tone-play-toggle>
		</div>
	</tone-example>

	<script type="text/javascript">
		// the player
		const player = new Tone.GrainPlayer({
			url: "https://tonejs.github.io/audio/berklee/arpeggio3crazy.mp3",
			loop: true,
			grainSize: 0.1,
			overlap: 0.05,
		}).toDestination();

		ui({
			parent: document.querySelector("#content"),
			tone: player,
		});

		// bind the interface
		document.querySelector("tone-play-toggle").addEventListener("start", () => player.start());
		document.querySelector("tone-play-toggle").addEventListener("stop", () => player.stop());

	</script>
</body>
</html>
